<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="授权" width="700px" @ok="handleSubmit">
    <BasicForm @register="registerForm" />

    <BasicTree
      ref="treeRef"
      checkable
      toolbar
      :treeData="state.treeData"
      :checkedKeys="state.checkedKeys"
      :expandedKeys="state.allTreeKeys"
      :selectedKeys="state.selectedKeys"
      :checkStrictly="true"
      :clickRowToExpand="false"
      title="资源"
      highlight
      search
      @check="onCheck"
      @select="onTreeNodeSelect"
    >
      <template #title="{ slotTitle, ruleFlag }">
        {{ slotTitle }}
        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
      </template>
    </BasicTree>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive } from "vue"
  import { BasicForm, useForm } from "/@/components/Form/index"
  import { authorizeFromSchema } from "./data"
  import { BasicTree, TreeItem } from "/@/components/Tree"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { Icon } from "/@/components/Icon"

  import { useMessage } from "/@/hooks/web/useMessage"
  // 声明Emits
  const emit = defineEmits(["success", "register"])

  //表单配置
  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
    labelWidth: 80,
    labelCol: {
      md: { span: 4 },
      sm: { span: 6 },
    },
    wrapperCol: {
      md: { span: 20 },
      sm: { span: 18 },
    },
    schemas: authorizeFromSchema,
    showActionButtonGroup: false,
  })

  interface State {
    // 树的信息
    treeData: TreeItem[]
    // 树的选择节点信息
    checkedKeys?: string[]
    // 树的全部节点信息
    allTreeKeys?: string[]
    defaultCheckedKeys?: string[]
    // 树的选中的节点信息
    selectedKeys: string[]
  }

  const state = reactive<State>({
    treeData: [],
    selectedKeys: [],
  })

  /**
   * 数据
   */
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    await reset()
    setDrawerProps({ confirmLoading: false })
  })

  /**
   * 点击选中
   */
  const onCheck = (o) => {
    state.checkedKeys = o.checked ? o.checked : o
  }
  /**
   * 选中节点，打开数据权限抽屉
   */
  const onTreeNodeSelect = (key) => {
    if (key && key.length > 0) {
      state.selectedKeys = key
    }
    unref(state.selectedKeys)[0]
  }

  /**
   * 重置
   */
  function reset() {}

  /**
   * 提交
   */
  async function handleSubmit() {
    console.log("editKey: ", transferRef.value.emitKeys)

    //关闭弹窗
    closeDrawer()
    //刷新列表
    emit("success")
  }
</script>

<style scoped lang="less"></style>
